<%@ page language="java" contentType="text/html; charset=utf-8"%>
<html>
    <head>
    	<script type='text/javascript' src='<%=application.getContextPath()%>/njs/basd/jqgrid/js/jquery-1.5.2.min.js'></script>
        <script type='text/javascript' src='<%=application.getContextPath()%>/njs/basd/common/jquery-ui-1.8.11.custom.min.js'></script>
        <link rel='stylesheet' type='text/css' href='<%=application.getContextPath()%>/njs/basd/fullcalendar/fullcalendar.css' />
        <link rel='stylesheet' type='text/css' href='<%=application.getContextPath()%>/njs/basd/fullcalendar/fullcalendar.print.css' media='print' />
        <script type='text/javascript' src='<%=application.getContextPath()%>/njs/basd/fullcalendar/fullcalendar.zh.js'></script>
        <script type="text/javascript" src="<%=application.getContextPath()%>/njs/basd/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
        <link rel="stylesheet" type="text/css" href="<%=application.getContextPath()%>/njs/basd/fancybox/jquery.fancybox-1.3.4.css" media="screen" />        
        <script type="text/javascript">
            //在portal中高度自适应，此代码加入到panel页面的最末尾，
            //此页面需要引入jquery<%=request.getRemoteAddr()%>
            (function(){
                var params = document.location.search.substr(1).split("&");
                $.each(params,function(){
                    var param = this.split("=");
                    var tag = "iframeresizescript"
                    if(param[0]==tag){
                    	var p = document.location.search.substr(1).substr(tag.length+1);
                        document.write("<script type='text\/javascript' src='"+decodeURIComponent(p)+"'><\/script>");
                    }
                });
            })();
        </script>        
        <script type='text/javascript'>
            var calendar;
            $(document).ready(function() {
                calendar = $('#calendar').fullCalendar({
                    header: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'month,agendaWeek,agendaDay'
                    },
                    theme: false,
                    selectable: true,
                    selectHelper: true,
                    select: function(start, end, allDay) {
                        $(".cal-title span").replaceWith("<span>任务名称：<input type='text' name='title' id='title'></span>");
                        $(".cal-time").text(getTimeRangeStr(start, end, allDay));
                        $(".cal-footer .fl a").attr("rel", "save").text("保存");
                        $(".cal-footer .fr a").attr("rel", "cancel").text("取消");
                        $("#fancybox").data("event",{start:start, end:end, allDay:allDay}).click();
                    },
                    editable: true,
                    events: <%=request.getAttribute("flag")%>,
                    eventDrop: updateEvent,
                    eventResize: updateEvent,
                    eventClick:function(event){
                        $(".cal-title span").replaceWith("<span>"+event.title+"</span>");
                        $(".cal-time").text(getTimeRangeStr(event.start, event.end, event.allDay));
                        $(".cal-footer .fl a").attr("rel", "delete").text("删除");
                        $(".cal-footer .fr a").attr("rel", "edit").text("修改");
                        $("#fancybox").data("event", event).click();
                    },
                    eventMouseover:function(event){}
                });
                $(window).resize();
            });
            
            function getTimeRangeStr(start, end, allDay){
                var starttime,endtime,timeformat=allDay?"":" HH:mm";
                starttime = $.fullCalendar.formatDate(start,"yyyy年M月d日"+timeformat);
                end=(end==null)?start:end;
                if(end.getFullYear()!= start.getFullYear()){
                    endtime = $.fullCalendar.formatDate(end, "yyyy年M月d日"+timeformat);
                }else if(end.getMonth()!=start.getMonth()){
                    endtime = $.fullCalendar.formatDate(end, "M月d日"+timeformat);
                }else if(end.getDate()!=start.getDate()){
                    endtime = $.fullCalendar.formatDate(end, "d日"+timeformat);
                }else if($.trim(timeformat)){
                    endtime = $.fullCalendar.formatDate(end, $.trim(timeformat));
                }
                if(endtime){
                    return starttime+" - "+endtime;
                }else{
                    return starttime;
                }
            }
            
            /**
             * 删除任务
             */
            function removeEvent(event){
                var eventid= event.id;
                $.post("removeCalendarEvent.do", "id="+eventid, function(msg){
                    if(msg=="true"){
                        calendar.fullCalendar('removeEvents', eventid);
                        setTimeout("$(window).resize();", 500);
                    }else{
                        alert("删除失败");
                    }
                });
            }
            /**
             * 修改任务
             */
            function updateEvent(event){
                $.post("editCalendarEvent.do", param(event), function(msg){
                    if(msg=="true"){
                        calendar.fullCalendar('updateEvent', event);
                        $(window).resize();
                    }else{
                        alert("修改失败");
                    }
                });
            }
            /**
             * 添加任务
             */
            function addEvent(event){
                $.post("addCalendarEvent.do", param(event), function(msg){
                    var id = eval("("+msg+")")["id"];
                    if(id){
                        event["id"] = id;
                        calendar.fullCalendar('renderEvent',event, true);
                        $(window).resize();
                    }else{
                        alert("添加失败");
                    }
                    calendar.fullCalendar('unselect');
                });
            }
            /**
             * 把js对象转化为url参数
             */
            function param(event){
                var param = "";
                var cols = ["id", "title", "allDay", "notice", "description"];
                var dates = ["start", "end"];
                $.each(cols, function(i,col){
                    var value = event[col];
                    var type = typeof(value);
                    if(type=="string"){
                        value = encodeURIComponent(value);
                    }else if(type=="boolean"){
                        value = (value?"1":"0");
                    }
                    param +="&"+col+"="+value;
                });
                $.each(dates,function(i,key){
                    var d = event[key];
                    var value = $.fullCalendar.formatDate(d,"yyyy-MM-dd HH:mm:ss");
                    param +="&"+key+"="+encodeURIComponent(value);
                });
                return param.substring(1);
            }
            
            $(function(){
                $("#fancybox").fancybox({padding:0});
                $(".cal-footer a").click(function(){
                    var rel = $(this).attr("rel");
                    if(rel=="edit"){//点击修改
                        $(".cal-title span").replaceWith("<span>任务内容：<input type='text' name='title' id='title' value='"+$(".cal-title span").text()+"'></span>");
                        $(".cal-footer .fl a").attr("rel", "update").text("保存");
                        $(".cal-footer .fr a").attr("rel", "cancel").text("取消");
                    }else{
                        var event = $("#fancybox").data("event");
                        event['title'] = $(".cal-title :text[name='title']").val();
                        if(rel=="save"){//点击保存
                            addEvent(event);
                        }else if(rel=="delete"){//点击删除
                            removeEvent(event);
                        }else if(rel=="update"){//更新
                            updateEvent(event);
                        }
                        $.fancybox.close();
                    }
                });
            });
        </script>
        <style type='text/css'>
            body {
                padding: 0;
                margin: 3px;
                text-align: center;
                font-size: 12px;
                font-family: "微软雅黑","Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
                overflow: hidden;
            }

            .fc-header-title h2{
                font-size: 13px;
            }
            .fc-button-content{
                font-size: 10px;
            }

            #calendar {
                width: 100%;
                margin: 0 auto;
            }

            .fl{
                float:left;
            }
            .fr{
                float:right;
            }
            .calendar-wrap{
                background-color:#FFF;
                overflow:hidden;
                float:left;
                display:inline;
                position:relative;
                text-align: left;
            }
            .cal-title{
                font-size:13px;
                color:#666;
                line-height:20px;
            }
            .cal-time{
                font-size:9px;
                color:#666;
                margin-top:10px;
            }
            .cal-footer{
                border-top:1px solid #CCC;
                margin-top:5px;
                padding-top:10px;
                overflow:hidden;
            }
            .cal-footer a,.cal-footer a:visited{
                color:#1D6B9F;
                text-decoration:underline;
            }
            .cal-footer a:hover,.cal-footer a:active{
                color:#1D6B9F;
                text-decoration:underline;
            }            
            input#title{
                width: 100%
            }
            div#simpleDialog1{
                width: 250px;
                padding: 10px;
            }
        </style>
    </head>
    <body>
        <div id='calendar'></div>
        <div style="display: none">
            <a href="#simpleDialog1" id="fancybox">show dialog!</a>
            <div class="calendar-wrap" id="simpleDialog1">
                <div class="cal-title"><span></span></div>
                <div class="cal-footer">
                    <span class="fl"><a href="#none">删除</a></span><span class="fr"><a href="#none">修改</a></span>
                </div>
            </div> 
        </div>
    </body>
</html>
